<template>
	<div id="salesRankByTime" class="salesRankByTime">
		<group class="salesRankGroup" title="销售额">
			<x-table full-bordered style="background-color:#fff;">
				<thead>
				<tr class="salesRankTable">
					<th>排名</th>
					<th>姓名</th>
					<th>销售额</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="(item,index) in salesContractTotalAmountRank">
					<td><img v-if="index == 0" slot="icon" src="../../assets/svg/icon_crown.svg" class="firstIcon">{{item.id}}</td>
					<td>{{item.name.substring(0,4)}}</td>
					<td>{{item.value}}</td>
				</tr>
				</tbody>
			</x-table>
		</group>

		<group class="salesRankGroup" title="成单数">
			<x-table full-bordered style="background-color:#fff;">
				<thead>
				<tr class="salesRankTable">
					<th>排名</th>
					<th>姓名</th>
					<th>成单个数</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="(item,index) in salesContractNumberRank">
					<td><img v-if="index == 0" slot="icon" src="../../assets/svg/icon_crown.svg" class="firstIcon">{{item.id}}</td>
					<td>{{item.name.substring(0,4)}}</td>
					<td>{{item.value}}</td>
				</tr>
				</tbody>
			</x-table>
		</group>

		<group class="salesRankGroup" title="试听个数">
			<x-table full-bordered style="background-color:#fff;">
				<thead>
				<tr class="salesRankTable">
					<th>排名</th>
					<th>姓名</th>
					<th>试听个数</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="(item,index) in salesDemoClassRank">
					<td><img v-if="index == 0" slot="icon" src="../../assets/svg/icon_crown.svg" class="firstIcon">{{item.id}}</td>
					<td>{{item.name.substring(0,4)}}</td>
					<td>{{item.value}}</td>
				</tr>
				</tbody>
			</x-table>
		</group>

	</div>
</template>

<script>
	import NetWorking from '../../../../utils/networking'
	import {Group, XTable} from 'vux'
	export default {
		name: "teacher-lesson-rank",
		props: ['type'],
		components: {
			Group,
			XTable
		},
		data() {
			return {
				url: '',
				itemList: [],
				salesDemoClassRank: [],
				salesContractNumberRank: [],
				salesContractTotalAmountRank: []
			}
		},
		created: function() {
			this.loadData()
		},
		watch: {
			type: function() {
				this.loadData()
			}
		},
		methods: {
			loadData: function() {

				switch(this.type){
					case '0':
						this.url = 'ai/sales/getSalesRankByDay'
						break
					case '1':
						this.url = 'ai/sales/getSalesRankByWeek'
						break
					case '2':
						this.url = 'ai/sales/getSalesRankByMonth'
						break
					default:
						this.url = 'ai/sales/getSalesRankByDay'
						break
				}

				let _this = this
				NetWorking.doGet(
					_this.url,
					null,
					null
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.salesDemoClassRank = rs.salesDemoClassRank
							_this.salesContractNumberRank = rs.salesContractNumberRank
							_this.salesContractTotalAmountRank = rs.salesContractTotalAmountRank
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style>
	.salesRankByTime{
		margin-top: 20px;
		margin-bottom: 100px;
	}

	.salesRankTable {
		background: white;
		color: black;
	}

	.salesRankGroup{
		margin-bottom: 30px;
		box-shadow: 2px 2px 2px #888888;
	}

	.salesRankGroup > .weui-cells {

	}

	.salesRankGroup > .weui-cells__title {
		margin-bottom: 0;
		font-size: 16px;
		font-weight: bold;
		background: orange;
		color: white;
		padding: 10px;
	}

	.firstIcon {
		width: 20px;
		float: left;
		margin-top: 10px;
		margin-left: 1px;
		margin-right: -20px;
	}
</style>